<template>
      文件上传<van-uploader :after-read="afterRead" :before-read='beforeRead'/>
    <button @click="onSubmit">Button</button>


</template>




<script setup>
import { ref } from 'vue'
import axios from 'axios'


const filedata = ref(null)


const filename = ref(null)

const tcount = ref(null)


const count = ref(0)



const uploadeFile = async (data) => {
    await axios.post('http://127.0.0.1:8000/up/file/',data)    
}




const afterRead = (res) => {
    const data = new FormData()
    const start = count.value *(1024*1024)
    const end = (count.value+1)*(1024*1024)
    // 0  1024*1024
    // 1024*1024  2*1024*1024
    //当前上传的文件流
    data.append("file",filedata.value.slice(start,end))
        //文件名
    data.append("filename",filename.value)
        //一共有多少片
    data.append("tcount",tcount.value)
        //当前上传的索引
    data.append("count",count.value)
    data.append('size',filedata.value.size)

    uploadeFile(data)

    if (count.value == tcount.value - 1) {
        alert("上传完成")
    }else{
        count.value++
        afterRead()
    }




}

const beforeRead = (file) => {
    console.log(file)
    filedata.value = file
    filename.value = file.name
      //计算文件总片数
    tcount.value = Math.ceil(file.size/(1024*1024))
    console.log(tcount.value)
    return true
}








</script>




<style scoped>

</style>